<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <input type="button" id="btn1" value="成功">
    <input type="button" id="btn2" value="失败">
    <input type="button" id="btn3" value="警告">
    <dialog>这是弹出框元素</dialog>
</body>
<script>
    
    const obtn1 = document.getElementById("btn1")
    const obtn2 = document.getElementById("btn2")
    const obtn3 = document.getElementById("btn3")

    obtn1.onclick = function(){
        Toast({
            type:"success",
            txt:"成功啦！真好",
            close:"auto",
            time:3000,
            closeCB:function(){
                alert("关闭时要执行的功能")
            }
        })
    }

    obtn2.onclick = function(){
        const t1 = Toast({
            type:"error"
        });
        const t2 = Toast({
            type:"error"
        });
        const t3 = Toast({
            type:"error"
        });
        console.log(t1 === t2);
        console.log(t1 === t3);
        console.log(t2 === t3);
        console.log(t1);
    }

    obtn3.onclick = function(){
        Toast({
            type:"warning",
            close:"click",
            time:1000
        })
    }


    const Toast = (function(){
        // 单例模式：在外部函数内，立即创建元素，并插入页面，实现无论执行多少次弹出框，页面上只存在一个弹出框元素
        const ele = document.createElement("dialog");
        document.body.appendChild(ele);

        return function(ops = {}){
            // 处理可选参数的默认值
            let {type, txt="", close="auto", time=2000, closeCB} = ops;
            let color = "#ccc";
            // 处理未按要求传递参数，报错
            // 传入指定的类型，需要得到不同的配置
            switch(type){
                case "success":
                    txt = txt || "成功";
                    color = "green";
                    break;
                case "error":
                    txt = txt || "失败";
                    color = "red";
                    break;
                case "warning":
                    txt = txt || "警告";
                    color = "orange";
                    break;
                default:
                    throw new Error("type传入错误，必须为：'success', 'error', 'warning'中的一个")
            }
            // 元素进行加工修饰
            ele.innerHTML = txt;
            ele.style.color = color;
            ele.style.borderColor = color;
            ele.style.display = "block";
            // 根据不同的关闭方式，执行关闭功能
            if(close === "auto"){
                setTimeout(()=>{
                    ele.style.display = "none";
                    closeCB && closeCB();
                },time)
            }else{
                // document["on"+close] = function(){}
                // document["on"+"click"] = function(){}
                // document["onclick"] = function(){}
                // document.onclick = function(){}
                ele["on"+close] = function(){
                    ele.style.display = "none";
                    closeCB && closeCB();
                    ele["on"+close] = null;
                }
            }
            // 返回弹出框元素
            return ele;
        }
    })();



</script>
</html>